<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" label-position="right" :label-width="90" inline ref="formInline">
                    <FormItem label="停车库">
                        <div class="filters-input">
                            <el-select v-model="filters.parkingId" placeholder="请选停车库" filterable clearable
                                       no-data-text="暂无数据">
                                <el-option v-for="item in parkingList" :value="item.id" :key="item.id"
                                           :label="item.parkingName"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="商家名称">
                        <div class="filters-input">
                            <Input v-model="filters.shopName" placeholder="商家名称" clearable/>
                        </div>
                    </FormItem>
                    <FormItem label="车牌号">
                        <div class="filters-input">
                            <Input v-model="filters.plateNumber" placeholder="车牌号" clearable/>
                        </div>
                    </FormItem>
                    <FormItem label="使用日期">
                        <div class="filters-input">
                            <DatePicker v-model="filters.usedAt" @on-change="fyUsedAt" type="daterange"
                                        placement="bottom-end" placeholder="核销日期"></DatePicker>
                        </div>
                    </FormItem>
                    <FormItem label="审核状态">
                        <div class="filters-input">
                            <el-select v-model="filters.auditStatus" placeholder="审核状态" filterable clearable>
                                <el-option value="0" label="待审核"></el-option>
                                <el-option value="1" label="通过"></el-option>
                                <el-option value="2" label="拒绝"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="核销状态">
                        <div class="filters-input">
                            <el-select v-model="filters.used" placeholder="使用状态" filterable clearable>
                                <el-option value="0" label="未使用"></el-option>
                                <el-option value="1" label="已使用"></el-option>
                            </el-select>
                        </div>
                    </FormItem>


                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('formInline')">搜索</Button>
                    </FormItem>
                </Form>
            </Row>
            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="折扣模式 :">
                                <span v-if="props.row.discountMode == 1">按百分比计算</span>
                                <span v-if="props.row.discountMode == 2">直接减去金额(单位:元)</span>
                                <span v-if="props.row.discountMode == 3">减免停车时间(单位:分钟)</span>
                                <span v-if="props.row.discountMode == 4">免费券</span>
                            </el-form-item>
                            <el-form-item label="折扣数值 :">
                                <span>{{ props.row.discountNum }}</span>
                            </el-form-item>
                            <el-form-item label="折扣说明 :">
                                <span>{{ props.row.discountMsg }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column prop="parkingId" label="停车场">
                    <template slot-scope="scope">
                        {{parkingNameList[scope.row.parkingId]}}
                    </template>
                </el-table-column>
                <el-table-column prop="applyPlateNumber" label="申请人车牌号"></el-table-column>
                <el-table-column prop="discountName" label="优惠券名称"></el-table-column>
                <!--<el-table-column prop="discountMode" label="折扣模式"></el-table-column>-->
                <!--<el-table-column prop="discountNum" label="折扣数值"></el-table-column>-->
                <!--<el-table-column prop="discountMsg" label="折扣说明"></el-table-column>-->
                <el-table-column prop="shopName" label="商家名称"></el-table-column>
                <el-table-column prop="auditStatus" label="审核状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.auditStatus == 0">待审核</span>
                        <span v-if="scope.row.auditStatus == 1" style="color: green;">通过</span>
                        <span v-if="scope.row.auditStatus == 2" style="color: red;">拒绝</span>
                    </template>
                </el-table-column>
                <el-table-column prop="used" label="核销状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.used == 0" style="color: red;">未使用</span>
                        <span v-else style="color: green;">已使用</span>
                    </template>
                </el-table-column>
                <el-table-column prop="usedAt" label="核销时间"></el-table-column>
                <el-table-column prop="updatedAt" label="发放时间"></el-table-column>

                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary"
                                   v-if="scope.row.couponId == null && scope.row.auditStatus == 0 "
                                   @click="HandleExamine( scope.row )">审核
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  id="lyPage"
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>

        </Card>


        <Modal v-model="modalEdit" :title="modalType == 'add' ? '新增': '修改'">
            <Form ref="saveRecord" :model="Record" :rules="RecordRules" :label-width="90">

                <FormItem label="优惠券名称" prop="discountName">
                    <Input v-model="Record.discountName" clearable placeholder="优惠券名称" class="normal-input"></Input>
                </FormItem>

                <FormItem label="优惠券模式" prop="discountMode">
                    <el-select v-model="Record.discountMode" placeholder="优惠券模式" filterable clearable
                               style="width:100%" no-data-text="暂无数据">
                        <el-option value="1" label="按百分比计算"></el-option>
                        <el-option value="2" label="直接减去金额(单位:元)"></el-option>
                        <el-option value="3" label="减免停车时间(单位:分钟)"></el-option>
                        <el-option value="4" label="免费券"></el-option>
                    </el-select>
                </FormItem>

                <FormItem label="金额或分钟" prop="discountNum">
                    <Input v-model="Record.discountNum" clearable placeholder="金额或分钟" class="normal-input"></Input>
                </FormItem>

                <FormItem label="审核状态" prop="auditStatus">
                    <el-select v-model="Record.auditStatus" placeholder="审核状态" filterable clearable
                               style="width:100%" no-data-text="暂无数据">
                        <el-option value="1" label="通过"></el-option>
                        <el-option value="2" label="拒绝"></el-option>
                    </el-select>
                </FormItem>


            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel()">关闭</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="tableLoading">确定</Button>
            </div>
        </Modal>


    </div>
</template>


<script>
    //线上下载模板地址
    import baseURL from "_conf/url";
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from "js-cookie";
    import {TOKEN_KEY} from "@/libs/util";

    import moment from "moment"
    //线上上传账单地址
    const act = baseURL + "/api/bill/upload";

    export default {
        data() {
            return {
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //车库列表
                parkingList: [],
                parkingNameList: {},
                status: [],
                costType: [],
                tableData: [],
                //表单提交状态
                modal: {},
                tableLoading: false,
                modalEdit: false,
                modalType: 'add',
                Record: {},
                RecordRules: {
                    discountMode: [
                        {required: true, message: "请选择优惠券模式"}
                    ],
                    discountNum: [
                        {required: true, message: "请输入金额或分钟数"}
                    ],
                    discountName: [
                        {required: true, message: "请输入优惠券名称"}
                    ],
                    auditStatus: [
                        {required: true, message: "请选择审核状态"}
                    ]


                },
            }
        },
        created: function () {
            this.getParking();
            this.loadData();
        },
        methods: {
            //加载数据
            loadData: function () {
                if (this.tableLoading) return;
                this.tableLoading = true;
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;

                console.log(params)

                //与后台交换数据
                this.postRequest("/api/parking/shop/discount/list", params).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            getCostType: function (value) {
                this.getRequest(
                    "/api/costType/getCostTypeByhousingId?housingId=" + value
                ).then(res => {
                    if (res.code == 20000) {
                        this.costType = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            getParking: function () {
                this.getRequest("/api/parking/all").then(res => {
                    this.parkingList = res.data;
                    const parkingNameList = {};
                    res.data.forEach(function (c) {
                        parkingNameList[c.id] = c.parkingName;
                    })
                    this.parkingNameList = parkingNameList
                });
            },
            //查询
            handleQuery(name) {
                this.loadData();
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            onCancel: function () {
                this.modalEdit = false;
            },
            //优惠券模式 1按百分比计算 2直接减去金额(单位:元) 3减免停车时间(单位:分钟) 4 免费券
            formatterMode(row, column) {
                if (row.couponMode == '1') {
                    return "按百分比计算";
                } else if (row.couponMode == '2') {
                    return "直接减去金额(单位:元)";
                } else if (row.couponMode == '3') {
                    return "减免停车时间(单位:分钟)";
                } else if (row.couponMode == '4') {
                    return "免费券)";
                } else {
                    return "--"
                }
            },
            //    编辑按钮
            HandleEdit: function (row) {
                this.modalEdit = true
                this.modalType = 'edit'
                this.Record = row;
            },
            //确认按钮
            handleSubmit: function () {
                console.log(this.Record);
                this.$refs['saveRecord'].validate(valid => {
                    if (valid) {
                        const url = "/api/parking/shop/discount/audit"
                        this.postRequest(url, this.Record).then(res => {
                            this.saveCarInfoLoading = false
                            if (res.code == 20000) {
                                this.$Message.success("操作成功！")
                                this.modalEdit = false
                                this.loadData()
                                return
                            }
                            this.$Message.error(res.message)
                        })

                    }
                })
            },
            fyUsedAt(usedAt) {
                this.filters.usedAt = usedAt;
            },
            //审核
            HandleExamine: function (row) {
                console.log(row);
                this.modalType = 'edit';
                this.modalEdit = true;
                this.Record = row;
            },
        }
    }
    ;
</script>
